<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        li{
            list-style: none;
        }
        .center{
            margin: 30px auto;
            width: 500px;
            height: 500px;
        }
        .center ul li{
            width: 350px;
            height: 45px;
            text-align: right;
        }
        .center ul li input{
            margin-left: 25px;
        }
        ul>span{
            float: right;
            margin-right: 50px;
        }
        .btn{
            margin: 10px 200px;
            width: 85px;
            height: 30px;
            background-color: orange;
            border: 1px solid white;
            color: white;
        }
        .success{
            color: green;
        }
        .wrong{
            color: red;
        }
        .sex1{
            float: right;
            width: 98px;
        }
        .sex1>span{
            padding-right: 35px;
        }
    </style>
</head>
<body>
    <div class="center">
        <ul>
            <span></span><li><span>用户名</span> <input type="text" class="username"> </li>
            <span></span><li><span>密码</span> <input type="text" class="password"> </li>
            <span></span><li><span>姓名</span> <input type="text" class="name"> </li>
            <span></span><li><span>手机号</span> <input type="text" class="phone"> </li>
            <span></span><li><span>邮箱</span> <input type="text" class="email"> </li>
            <span></span>
            <li>
                <span>性别</span> 
                <div class="sex1"><input type="radio" class="sex"> <span>女</span></div>
                <div class="sex1"><input type="radio" class="sex"> <span>男</span></div>
            </li>
            <span></span><li><span>出生日期</span> <input type="text" class="birthday"> </li>
            <span></span><li><span>验证码</span> <input type="text" class="yanzheng"> </li>
        </ul>
        <button class="btn">注册</button>
    </div>
    <script>
        var spans = document.querySelectorAll('ul>span');
        var reg = [];
        var right = function(a){
            spans[a].className = 'success';
            spans[a].innerHTML = '输入合法';
        }
        var wrong = function(a){
            spans[a].className = 'wrong';
            spans[a].innerHTML = '输入不合法';
        }

        //验证用户名 0
        var username = document.querySelector('.username');
        reg[0] = /^[a-zA-Z0-9_-]{6,16}$/;
        username.onblur = function(){
            if(reg[0].test(this.value)){
                right(0);
            }
            else{
                wrong(0);
            }
        };

        //验证密码 1
        var password = document.querySelector('.password');
        reg[1] = /^[a-zA-Z]\w{5,15}$/;
        password.onblur = function(){
            if(reg[1].test(this.value)){
                right(1);
            }
            else{
                wrong(1);
            }
        };

        //验证姓名 2
        var name1 = document.querySelector('.name');
        reg[2] = /^[a-zA-Z]\w{5,15}$/;
        name1.onblur = function(){
            if(reg[2].test(this.value)){
                right(2);
            }
            else{
                wrong(2);
            }
        };

        //验证手机号 3
        var phone = document.querySelector('.phone');
        reg[3] = /^\d{11}$/;
        phone.onblur = function(){
            if(reg[3].test(this.value)){
                right(3);
            }
            else{
                wrong(3);
            }
        };

        //验证邮箱 4
        var email = document.querySelector('.email');
        reg[4] = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        email.onblur = function(){
            if(reg[4].test(this.value)){
                right(4);
            }
            else{
                wrong(4);
            }
        };

        //验证性别  5

        //验证出生日期 6
        var birthday = document.querySelector('.birthday');
        reg[6] = /^\d{8}$/;
        birthday.onblur = function(){
            if(reg[6].test(this.value)){
                right(6);
            }
            else{
                wrong(6);
            }
        };

        //验证码 7
    </script>
</body>
</html>